import React from 'react';
import {connect} from 'dva';
import {Form,Input,Select,Cascader,message,Button,Message} from 'antd';
import { insertServiceStaff, serviceStaffDetail, updateServiceStaff } from '../../services/api';
import {reg_REG1, VER_PHONE, ID_CORD, ZHUZHI_REG,passWord_REG} from '../../common/system';

const FormItem = Form.Item;
const Option = Select.Option;

class FormInfo extends React.Component {

    state= {
        detail: {},
        fromDisabled: false
    }

	componentDidMount() {
        if(this.props.optionType === 'detail') {
            this.setState({fromDisabled: true});
        }
        if(this.props.data) {
            this.serviceStaffDetail(this.props.data)
            return;
        }
    }
    
    async serviceStaffDetail(param) {
        let res = await serviceStaffDetail(param);
        if(res.code === 200) {
            // res.msg && message.success(res.msg);
            res.data.fStreetCommunityId = res.data.fStreetCommunityId.split(",");
            this.setState({detail: res.data});
        }else {
            res.msg && message.error(res.msg);
        }
    }

    handleSubmit = (e) => {
        e.preventDefault();
        this.props.form.validateFields((err, fieldsValue) => {
            if (!err) {
                fieldsValue.fStreetCommunity = fieldsValue.fStreetCommunity.join(",");
                if (this.props.optionType === 'insert') {
                    this.insertServiceStaff(fieldsValue);
                } else {
                    this.updateServiceStaff(fieldsValue);
                }
                return;
            }
        });
    }

    /**
     * 修改服务人员
     */
    async updateServiceStaff(fieldsValue) {
        fieldsValue.fId = this.props.data;
        let res = await updateServiceStaff(fieldsValue);
        if(res.code === 200) {
            Message.success('修改成功')
            this.props.getServicePeople();
            this.cancel();
        }else {
            res.msg && message.error(res.msg);
        }
    }

    /**
     * 添加服务人员
     */
    async insertServiceStaff(fieldsValue) {
        let res = await insertServiceStaff(fieldsValue);
        if(res.code === 200) {
            this.props.getServicePeople();
            this.cancel();
            Message.success('添加成功')

        }else {
            res.msg && message.error(res.msg);
        }
    }
    /**
     * 关闭模态框
    */
    cancel = () => {
        this.props.closeModal();
    }

    render() {
        const {getFieldDecorator} = this.props.form;
        const formLayout = {
            labelCol: {
                span: 4
            },
            wrapperCol: {
                span: 20
            }
        }
        return (
            <Form layout={`horizontal`}>
                <FormItem label="姓名" {...formLayout}>
                    {getFieldDecorator('fName', {
                        initialValue: this.state.detail.fStaffName,
                        rules: [
                            {
                                required: true,
                                message: '请输入姓名!'
                            },{
                                pattern: reg_REG1, 
                                message: '输入格式不正确'
                            }
                        ]
                    })(<Input disabled={this.state.fromDisabled} placeholder="请输入..."/>)}
                </FormItem>
                <FormItem label="街办社区" {...formLayout}>
                    {getFieldDecorator('fStreetCommunity', {
                        initialValue: this.state.detail.fStreetCommunityId,
                        rules: [
                            {
                                required: true,
                                message: '请选择街办社区!'
                            }
                        ]
                    })(<Cascader disabled={this.state.fromDisabled} options={this.props.areaInfo} placeholder="请选择..." changeOnSelect/>)}
                </FormItem>
                <FormItem label="服务内容" {...formLayout}>
                    {getFieldDecorator('fServiceType', {
                        initialValue: this.state.detail.fServiceType,
                        rules: [
                            {
                                required: true,
                                message: '请选择服务内容!'
                            }
                        ]
                    })(
                        <Select
                            placeholder="请选择..."
                            disabled={this.state.fromDisabled}
                            style={{
                            width: '100%'
                        }}>
                            {this.props.serviceType.map((item) => (
                                <Option value={item.fId} key={item.fId}>
                                    {item.fName}
                                </Option>
                            ))}
                        </Select>
                    )}
                </FormItem>
                <FormItem label="联系电话" {...formLayout}>
                    {getFieldDecorator('fPhone', {
                        initialValue: this.state.detail.fPhone,
                        rules: [
                            {
                                required: true,
                                message: '请输入联系电话!'
                            },{
                                pattern: VER_PHONE, 
                                message: '请输入正确的手机号'
                            }
                        ]
                    })(<Input disabled={this.state.fromDisabled} placeholder="请输入..."/>)}
                </FormItem>
                <FormItem label="密码" {...formLayout}>
                    {getFieldDecorator('fPassword', {
                        rules: [
                            {
                                required: true,
                                message: '请输入密码!'
                            },{
                                pattern: passWord_REG,
                                message:'密码由6-16位数字，小写字母，大写字母组成'
                            }
                        ]
                    })(<Input disabled={this.state.fromDisabled} type="password" placeholder={this.props.optionType === 'detail' ? '****** ' :"请输入..."}/>)}
                </FormItem>
                <FormItem label="身份证号" {...formLayout}>
                    {getFieldDecorator('fCardId', {
                        initialValue: this.state.detail.fCardId,
                        rules: [
                            {
                                required: true,
                                message: '请输入身份证号!'
                            },{
                                pattern: ID_CORD, 
                                message: '请输入正确的身份证号码'
                            }
                        ]
                    })(<Input disabled={this.state.fromDisabled} placeholder="请输入..."/>)}
                </FormItem>
                <FormItem label="家庭住址" {...formLayout}>
                    {getFieldDecorator('fAddress', {
                        initialValue: this.state.detail.fStaffAddress,
                        rules: [
                            {
                                required: true,
                                message: '请输入家庭住址!'
                            }
                        ]
                    })(<Input disabled={this.state.fromDisabled} placeholder="请输入..."/>)}
                </FormItem>
                <FormItem label="备注" {...formLayout}>
                    {getFieldDecorator('fRemarks',{
                        initialValue: this.state.detail.fRemarks,
                        rules: [{
                                max: 50, 
                                message: '备注长度不能查过50个字符'
                            }
                        ]
                    })(<Input disabled={this.state.fromDisabled} placeholder={this.props.optionType === 'detail' ? '' :"请输入..."}/>)}
                </FormItem>
                { !this.state.fromDisabled 
                ? <FormItem style={{
                    textAlign: 'right'
                }}>
                    <Button style={{
                        marginRight: 10
                    }} onClick={this.cancel}>取消</Button>
                    <Button type="primary" onClick={this.handleSubmit}>确定</Button>
                </FormItem>
                : null}
                
            </Form>
        );
    }
}
const NormalForm = Form.create()(FormInfo);

export default connect((state) => ({personalModal: state.example.personalModal, areaInfo: state.example.areaInfo, serviceType: state.example.serviceType}))(NormalForm)